<template>
  <el-dialog title="添加收费道路" :visible.sync="visible" :before-close="closeHandle" center>
    <el-container>
      <el-main>
        <el-form size="mini" :rules="rules" label-width="100px" :model="editRoadForm" ref="editRoadForm">
          <el-row>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="道路名称" prop="road_name">
                <el-input v-model="editRoadForm.road_name" type="text" placeholder="道路名称"/>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="所属单位" prop="ssdw">
                <el-input v-model="editRoadForm.ssdw"  @click.native="openArea" type="text" placeholder="所属单位"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item prop="location" label="停车位置">
                <el-select placeholder="停车位置" v-model="editRoadForm.location">
                  <el-option v-for="item in park_location" :key="item.id" :value="item.id"
                             :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item prop="time" label="停车时段">
                <el-select placeholder="停车时段" v-model="editRoadForm.time">
                  <el-option v-for="item in park_time" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="停车场数" prop="park_num">
                <el-input v-model="editRoadForm.park_num" type="number" placeholder="停车场数"/>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="泊位数" prop="berth_num">
                <el-input type="number" v-model="editRoadForm.berth_num" placeholder="泊位数"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="起止地点" prop="start_end">
                <el-input v-model="editRoadForm.start_end" width="100%" type="text" placeholder="起止地点"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item prop="type" label="道路类型">
                <el-select placeholder="道路类型" v-model="editRoadForm.type">
                  <el-option v-for="item in road_type" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item prop="is_fan" label="是否师范路">
                <el-select placeholder="是否师范路" v-model="editRoadForm.is_fan">
                  <el-option v-for="item in road_kind" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!--<el-row>-->
            <!--<el-col :xs="12" :sm="12" :lg="12">-->
              <!--<el-form-item label="备注" prop="remark">-->
                <!--<el-input v-model="editRoadForm.remark" type="text" placeholder="备注"/>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
          <!--</el-row>-->
        </el-form>
      </el-main>
      <el-footer style="text-align: center">
        <el-button type="primary" class="btn-search" @click="submitForm('editRoadForm')">确定</el-button>
        <el-button class="btn-search" @click="resetForm('editRoadForm')">返回</el-button>
      </el-footer>
    </el-container>

    <department :extraParam="extraParam"
                :dialogDwVisible.sync="dwVisible"
                :dwLoading.sync="dwLoading"
                @setDepartment="dwName"></department>
  </el-dialog>
</template>

<script>
  import { selDictonary } from '../../../api/dictionary'
  import { editTollRoad } from '../../../api/parkingResource/tollRoad'
  import Department from '../../common/sysorg/department'

  export default {
    name: 'tollRoadEdit',
    components: { Department },
    data() {
      return {
        extraParam: {
          lovtype: 'orgtype',
          level: null,
          orgtype: '1',
          p_org: null,
          getSelfOrg: null
        },
        dwVisible: false,
        dwLoading: true,
        visible: false,
        park_location: [],
        park_time: [],
        road_type: [],
        road_kind: [],
        editRoadForm: {
          road_no: '',
          road_name: '',
          ssdw_no: '',
          ssdw: '',
          location: '',
          type: '',
          park_num: '',
          berth_num: '',
          start_end: '',
          time: '',
          is_fan: '',
          remark: ''
        },
        rules: {
          road_name: [
            { required: true, message: '道路名称为空', trigger: 'blur' }
          ],
          ssdw: [
            { required: true, message: '所属单位为空', trigger: 'change' }
          ],
          location: [
            { required: true, message: '停车位置为空', trigger: 'blur' }
          ],
          time: [
            { required: true, message: '停车时段为空', trigger: 'change' }
          ],
          type: [
            { required: true, message: '道路类型为空', trigger: 'blur' }
          ],
          is_fan: [
            { required: true, message: '是否师范路为空', trigger: 'blur' }
          ]
        }
      }
    },
    props: ['editRoadVisible', 'editData'],
    mounted() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'ori') {
            this.park_location = content[i].comboboxDetailList
          } else if (content[i].id === 'tcsd') {
            this.park_time = content[i].comboboxDetailList
          } else if (content[i].id === 'roadkind') {
            this.road_kind = content[i].comboboxDetailList
          } else if (content[i].id === 'roadtype') {
            this.road_type = content[i].comboboxDetailList
          }
        }
      })
    },
    watch: {
      editRoadVisible(val) {
        this.visible = val
      },
      visible(val) {
        this.$emit('update:editRoadVisible', val)
      },
      editData(val) {
        this.editRoadForm.is_fan = val.roadkind
        this.editRoadForm.park_num = val.parknum
        this.editRoadForm.berth_num = val.placenum
        this.editRoadForm.location = val.tcwz
        this.editRoadForm.ssdw_no = val.ssdw
        this.editRoadForm.ssdw = val.ssdwname
        this.editRoadForm.type = val.roadtype
        this.editRoadForm.start_end = val.qzddname
        this.editRoadForm.time = val.tcsd
        this.editRoadForm.road_name = val.roadname
        this.editRoadForm.road_no = val.roadno
        this.editRoadForm.remark = val.remark
      }
    },
    methods: {
      closeHandle() {
        this.visible = false
      },
      openArea() {
        this.dwVisible = true
      },
      submitForm(addSpaceForm) {
        this.$refs[addSpaceForm].validate((valid) => {
          if (valid) {
            editTollRoad(this.editRoadForm).then(res => {
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.visible = false
              this.editRoadForm.ssdw_no = ''
              this.$refs[addSpaceForm].resetFields()
              this.$emit('reSelectRoad', 1)
            })
          }
        })
      },
      resetForm(addSpaceForm) {
        this.$refs[addSpaceForm].resetFields()
        this.editRoadForm.ssdw_no = ''
        this.visible = false
      },
      dwName(val) {
        this.editRoadForm.ssdw_no = val.orgno
        this.editRoadForm.ssdw = val.orgname
      }
    }
  }
</script>

<style scoped>
</style>
